<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="input01" type="text">
    <input id="input02" type="text">
    <input id="input03" type="text">
 
    <script>
        // 获取到input输入框对象
        let input1 = document.querySelector('#input01');
        let input2 = document.querySelector('#input02');
        let input3 = document.querySelector('#input03');
        // 创建一个没有原型链的对象，用于监听该对象的某属性的变化
        let model = Object.create(null);
        // 当鼠标移开输入框的时候，view层数据通知model层数据的变化
        input1.addEventListener('blur',function() {
            model['user'] = this.value;
        })
        input2.addEventListener('blur',function() {
            model['user'] = this.value;
        })
        // input3.addEventListener('blur',function() {
        //     model['user'] = this.value;
        // })
        
        // 设置钩子队列
        let MM = [input1, input2];
        // 当model层数据发生变化的时候，通知view层数据的变化。
        Object.defineProperty(model, 'user', {
            set(v) {
                user = v;
                // 绑定所有钩子
                MM.forEach(element => {
                    element.value = v;
                });
            },
            get() {
                return user;
            }
        })

        function appendHook(elem) {
            // 先赋值
            elem.value = MM[0].value;
            // 绑定事件
            elem.addEventListener('blur',function() {
                model['user'] = this.value;
            });
            // 加入钩子队列
            MM.push(elem);
        }
    </script>
</body>
</html>